<script setup lang="ts">
import { useFormat } from '@/composable'
import { getLogisticsDetail } from '@/services/order'
import type { LogisticsDetail } from '@/types/order'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
// import startImage from '@/assets/'
import endImg from '@/assets/end.png'
import startImg from '@/assets/start.png'
import carImg from '@/assets/car.png'
window._AMapSecurityConfig = {
  securityJsCode: '6484e93da3a2d8fbb3286b9165267196'
}
const route = useRoute()
const logisticsDetail = ref<LogisticsDetail>()
onMounted(async () => {
  const data = await getLogisticsDetail(route.params.id as string)
  logisticsDetail.value = data.data
  AMapLoader.load({
    key: '	275c155aa65049ea064a5f5f3db18128', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  }).then((AMap) => {
    // 使用 Amap 初始化地图,文档中是vue2的写法，vu3中没有this
    const map = new AMap.Map('map', {
      //设置地图容器id
      mapStyle: 'amap://styles/macaron',
      zoom: 8
    })
    // 规划路线
    AMap.plugin('AMap.Driving', function () {
      var driving = new AMap.Driving({
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        // 第一个map是AMap.driving的属性，第二个map是初始化的地图名
        map: map,
        showTraffic: false, // 关闭路况显示
        hideMarkers: true // 隐藏覆盖
      })

      // 起点
      const start = data.data.logisticsInfo.shift()
      const startMarker = new AMap.Marker({
        icon: startImg,
        position: [start?.longitude, start?.latitude]
      })
      map.add(startMarker)

      // 终点
      const end = data.data.logisticsInfo.pop()
      const endMarker = new AMap.Marker({
        icon: endImg,
        position: [end?.longitude, end?.latitude]
      })
      map.add(endMarker)

      driving.search(
        [start?.longitude, start?.latitude],
        [end?.longitude, end?.latitude],
        {
          waypoints: data.data.logisticsInfo.map((item) => [
            item.longitude,
            item.latitude
          ])
        },
        function (status: string, result: Object) {
          // 	status为complete时，result为DrivingResult；当status为error时，result为错误信息info；当status为no_data时，代表检索返回0结果
          // 未出错时，result即是对应的路线规划方案
          const carMarker = new AMap.Marker({
            icon: carImg,
            position: [
              data.data.currentLocationInfo.longitude,
              data.data.currentLocationInfo.latitude
            ],
            anchor: 'center' // 设置位置
          })
          map.add(carMarker)
          // 3秒之后放大该位置
          setTimeout(() => {
            map.setFitView([carMarker])
            map.setZoom(10)
          }, 3000)
        }
      )
    })
  })
})
// 物流状态的改变
const { formatlogistics } = useFormat()
</script>

<template>
  <div class="logistics-page" v-if="logisticsDetail">
    <div class="head_top">
      <van-nav-bar
        :title="formatlogistics(logisticsDetail.status)"
        left-arrow
        @click-left="$router.push({ name: 'OrderDetail' })"
      >
        <template #right>
          <van-icon name="service-o" size="18" />
        </template>
      </van-nav-bar>
      <div id="map" style="height: 400px">
        <!-- 地图显示 -->
      </div>
      <div class="logistics_bottom">
        <p class="info">
          {{ logisticsDetail.statusValue }}——预计{{
            logisticsDetail.estimatedTime
          }}送达
        </p>
        <p class="order">
          <span>{{ logisticsDetail.name }}</span>
          <span>{{ logisticsDetail.awbNo }}</span>
        </p>
      </div>
    </div>
    <!-- 物流详情 -->
    <div class="detail">
      <h3 class="head">物流详情</h3>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in logisticsDetail.list" :key="item.id">
          <h3>{{ item.statusValue }}</h3>
          <p class="local">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.logistics-page {
  // margin-top: 46px;
  .head_top {
    position: relative;
    height: 400px;
    background-color: #f4f5f8;
    .logistics_bottom {
      position: absolute;
      bottom: 10px;
      height: 50px;
      padding: 15px;
      background-color: #fff;
      left: 10px;
      right: 10px;
      border-radius: 10px;
      z-index: 999;
      .info {
        font-size: 15px;
        line-height: 26px;
      }
      .order {
        color: var(--cp-tip);
        font-size: 13px;
        margin-top: 5px;
        span:first-child {
          margin-right: 10px;
        }
      }
    }
  }
  :deep() {
    .van-nav-bar {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      background-color: #fff;
      border-radius: 5px;
    }
    .van-nav-bar__ {
      &title {
        font-weight: var(--van-font-weight-bold);
      }
      &arrow {
        color: var(--cp-text1);
        font-size: var(--cp-font-size-18);
      }
    }
  }
  .detail {
    padding: 0 10px;
    .head {
      padding: 15px 5px 5px;
      font-size: 16px;
      font-weight: 500;
    }
    .van-step__title {
      h3 {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 4px;
        color: var(--cp-text3);
      }
      .local {
        font-size: 13px;
        color: var(--cp-tip);
        margin-bottom: 4px;
      }
      .time {
        font-size: 13px;
        color: var(--cp-tag);
      }
    }
    .van-step--process {
      :deep() {
        .van-step__circle-container {
          font-size: 16px;
        }
      }
    }
    .van-step--waiting {
      :deep() {
        .van-step__circle {
          width: 8px;
          height: 8px;
        }
      }
    }
  }
}
</style>
